<template>
  <div class='family-list'>
    <ul>
      <li v-for="(item, index) in listData" :key="index">
        <img :src="item.wx_pic||defaultImg" alt="">
        <div class="content">
          <p><span class="name">{{item.name}}</span><span class="fr">学号：{{item.number}}</span></p>
          <p><span>专业班级：{{item.class}}</span><span class="fr">经济困难级别：{{item.grade}}</span></p>
          <p><span>生源地贷款：{{item.loan_home}}</span><span class="fr">国家贷款：{{item.loan_country}}</span></p>
          <p><span>资助类别：{{item.type}}</span><span class="fr">资助金额：{{item.money}}</span></p>
        </div>
      </li>
    </ul>
    <p class="no-data" v-show="listData&&listData.length==0">暂时没有数据</p>
  </div>
</template>
<script>
export default {
  props:['listData','routerDetail'],
  components:{
  },
  name: "",
  data () {
    return {
      defaultImg:require("@/assets/images/home/icon-personal.png"),
    };
  },
   methods:{
  },
   created(){
  }
}
</script>
<style lang="scss" scoped>
.family-list{
  li{
    display: flex;
    padding: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;

    img{
      width: 135px;
      height: 135px;
      border-radius: 50%;
      margin-right: 20px;
    }
    .content{
      flex: 1;

      .name{
        font-size: 16px;
        color: #333
      }
      p{
        font-size: 13px;
        color:#666;

        span:nth-of-type(2){
          // margin-left: auto;
        }
      }
    }
  }
  li:nth-of-type(1){
    border-top: 1px solid #ddd;
  }
}
</style>